<script setup>
import {useRoute} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();

const data = reactive({
  form: {
    agreed: '1',
    qsrq: new Date(),
    dlrQsrq: new Date(),
    jzrQsrq: new Date(),
    ysQmrq: new Date(),
  }
});
const {form} = toRefs(data);
const rules = {
  patientName: [{required: true, message: "请输入参与者姓名", trigger: "blur"}],
  phoneMobile: [{required: true, message: "请输入联系电话", trigger: "blur"}],
};
function resetFormData() {
  form.value = {
    agreed: '1',
    qsrq: new Date(),
    dlrQsrq: new Date(),
    jzrQsrq: new Date(),
    ysQmrq: new Date(),
    patientName: '',
    qmtp: '',
    phone: '',
    phoneMobile: '',
    dlrXm: '',
    dlrGx: '',
    dlrQmtp: '',
    dlrQsyy: '',
    jzrName: '',
    jzrQmtp: '',
    jzrQsyy: '',
    ysQmtp: '',
    ysPhone: '',
  };
}

onMounted(() => {
  // console.log('参数：', route.query);
  form.value.ysQmtp = route.query.signImg;
  form.value.ysPhone = route.query.phone;
  // console.log('参数2：', form.value);
});

//暴露state和play方法
defineExpose({
  form,
  resetFormData,
});
</script>
<template>
  <div class="container">
    <div class="el-form-box">
      <el-form ref="tys" :model="form" :rules="rules" label-width="190" class="el-form">
        <div style=" height: calc(100vh - 250px);">
          <div style="background: #fff; padding: 20px; border-radius: 5px">
            <h1 class="titleClass">
              外周血 Septin9 甲基化与多靶点粪便 FIT-DNA 联合检测
            </h1>
            <h1 class="titleClass">在结直肠癌早期筛查中的应用研究</h1>
          </div>
          <div style="background: #fff; padding: 20px; border-radius: 5px">
            <div class="boldText">
              尊敬的 <span class="spanClass">研究参与者：</span>
            </div>
            <div class="normalText">
              “外周血 Septin9 甲基化与多靶点粪便 FIT-DNA
              联合检测在结直肠癌早期筛查中的应用”课题研究。估计将有12000名<span
                class="dashText"
            >研究参与者</span
            >自愿参加。本研究已经得到四川大学华西医院生物医学伦理审查委员会的审查和批准。
            </div>
            <div class="normalText">1. 为什么要开展本项研究？</div>
            <div class="normalText normalTextContent">
              2022 年 2
              月，国家癌症中心发布的数据显示，结直肠癌发病率仍呈不断上升趋势。2016年中国结直肠癌新发病例数约40.8
              万例，已经跃居癌症发病谱的第 2 位。中国结直肠癌发病率为 29.51/10
              万，世标发病率为 18.05/10
              万，占全部恶性肿瘤新发病例的9.68%。降低中国结直肠癌的发病率和死亡率已成为刻不容缓的重大临床问题义。通过结直肠癌筛查，可
              以在疾病早期发现病变，提升结直肠癌的早诊率，有效改善结直肠癌的治疗效果，降低死亡率，提高参与者生存率。本研究目的是对比血液Septin
              9和粪便FIT-DNA检测在真实世界中对结直肠癌的诊断效能，评估两种检测不同的卫生经济学效益，并建立基于<span
                class="dashText"
            >研究参与者</span
            >的结直肠癌早期筛查大样本队列数据库。
            </div>
            <div class="normalText">2. 如果参加研究，您需要做什么？</div>
            <div class="normalText normalTextContent">
              本次研究需要在研究过程中进行肿瘤标志物筛查，包括血液 Septin9
              和粪便 FIT-DNA筛查，每位研究参与者接受随访 2
              次，采取电话随访形式，检测结束后半年随访第一次，一年后随访第二次（研究参与者一旦确诊肿瘤即可结束随访）。
            </div>
            <div class="normalText">3. 可供选择的诊疗方案有哪些？</div>
            <div class="normalText normalTextContent">
              您也可以选择科室提供的其他癌症筛查方案。
            </div>
            <div class="normalText">4. 哪些人不宜参加研究?</div>
            <div class="normalText normalTextContent">
              如果您为月经期女性；妊娠或哺乳期妇女；器官移植或先前非自体（同种异体）骨髓或干细胞移植的<span
                class="dashText"
            >研究参与者</span
            >；在研究抽血前 30
              天内接受输血；不能够提供足够和合格的样本进行研究测试；既往有结直肠癌史，或入组时已确诊为肿瘤正在接受抗肿瘤治疗；交流、理解和合作不够，或依从性较差，不能保证按要求完成随访的<span
                class="dashText"
            >研究参与者</span
            >，则不宜参加本研究。
            </div>
            <div class="normalText">5. 参加研究有哪些风险？</div>
            <div class="normalText normalTextContent">
              本研究为肿瘤筛查观察性试验，暂不涉及风险
            </div>
            <div class="normalText">6.参加研究有哪些可能的好处？</div>
            <div class="normalText normalTextContent">
              参加本项研究，有助于结直肠癌的早期筛查，本项研究还有助于确定哪种方法可以更安全有效地筛查出结直肠癌病人。
            </div>
            <div class="normalText">7.参加研究需要支付有关费用吗？</div>
            <div class="normalText normalTextContent">
              <span class="dashText normalText normalTextContent">
                ▲血液 Septin 9 甲基化检测：
              </span>
              <div style="margin-top: 12px">
                <span class="dashText normalText normalTextContent">
                  ⑴、医嘱名称：Septin 9 基因甲基化检测 ⑵、收费价格：908
                  元/次⑶、研究参与者周一至周五工作时间在华西医院门诊缴费窗口缴费，华西医院入院服务中心采血大厅采集5ml
                  静脉血 ⑷、7 个工作日后领取检测报告</span
                >
              </div>

              <div>
                <span class="dashText normalText normalTextContent">
                  ▲粪便 FIT-DNA 联合检测：</span
                >
                <div style="margin-top: 12px">
                  <span class="normalText normalTextContent dashText">
                    ⑴、医嘱名称：肠癌无创脱落细胞多靶点基因检测
                    ⑵、收费价格：2160 元/次
                    ⑶、研究参与者周一至周五工作时间在华西医院门诊缴费窗口缴费，门诊三楼⑷、7
                    个工作日到病理科窗口领取检测报告。 F 区病理科 4
                    号窗口领取采样盒，自行采集 5g
                    左右粪便样本，采完样装好之后送回病理科窗口
                  </span>
                </div>
              </div>
            </div>
            <div class="normalText">8.个人信息是保密的吗？</div>
            <div class="normalText normalTextContent">
              您的研究资料将保存在四川大学华西医院，研究者、研究主管部门、伦理审查委员会可查阅您的医疗记录。任何有关本项研究结果的公开报告将不会披露您的个人身份。我们将在法律允许的范围内，尽一切努力保护您个人医疗资料的隐私和个人信息。
            </div>
            <div class="normalText">9.我必须参加研究吗？</div>
            <div class="normalText normalTextContent">
              参加本项研究是完全自愿的，您可以拒绝参加研究，或在试验的任何阶段随时退出本研究而不会受到歧视和报复，其医疗待遇与权益不受影响。如果您决定退出本研究，请与您的医生联系，以便妥善诊疗疾病。
            </div>
          </div>
          <div
              style="
              background: #fff;
              padding: 0 20px;
              border-radius: 5px;
              margin-bottom: 10px;
            "
          >
            <div class="normalText normalTextContent">
              <span class="dashText">研究参与者</span
              >声明：我已经阅读了上述有关本研究的介绍，我的研究人员已向我充分解释和说明了本研究的目的、操作过程以及参加本研究可能存在的风险和潜在的获益，并回答了我所有相关问题。自愿参加本研究。
            </div>
            <div class="normalText">
              我
              <el-radio-group v-model="form.agreed">
                <el-radio value="1" label="同意"
                          style="margin: 0 5px;padding: 0;height: 20px;text-indent: 0;font-weight: 900;"/>
                <el-radio value="0" label="拒绝"
                          style="margin: 0 5px;padding: 0;height: 20px;text-indent: 0;font-weight: 900"/>
              </el-radio-group>
              除本研究以外的其他研究利用我的研究资料和生物标本。
            </div>
            <div class="signBox" style="margin-top: 50px">
              <div class="display w45">
                <el-form-item label="研究参与者正楷姓名：" prop="patientName">
                  <el-input class="inputWidth" v-model="form.patientName"/>
                </el-form-item>
              </div>
              <div class="display">
                <div class="display w45">
                  <el-form-item label="研究参与者签名：">
                    <el-input class="inputWidth" v-model="form.qmtp"/>
                  </el-form-item>
                </div>
                <div class="display w45" style="margin-left: 24px">
                  <el-form-item label="日期：" label-width="90">
                    <!--                    <el-input class="inputWidth2" v-model="form.qsrq"/>-->
                    <el-date-picker v-model="form.qsrq" class="inputWidth2" type="date" placeholder="选择日期"
                                    format="YYYY年MM月DD日"/>
                  </el-form-item>
                </div>
              </div>
              <div class="display">
                <div class="display w45">
                  <el-form-item label="研究参与者的联系电话：" prop="phone">
                    <el-input class="inputWidth" v-model="form.phone"/>
                  </el-form-item>
                </div>
                <div class="display w45" style="margin-left: 24px">
                  <el-form-item label="手机号：" label-width="90" prop="phoneMobile">
                    <el-input class="inputWidth2" v-model="form.phoneMobile"/>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="signBox">
              <div class="display w45" style="margin-top: 20px">
                <el-form-item label="法定代理人正楷姓名：">
                  <el-input class="inputWidth" v-model="form.dlrXm"/>
                </el-form-item>
              </div>
              <div class="display w45">
                <el-form-item label="与研究参与者关系：">
                  <el-input class="inputWidth" v-model="form.dlrGx"/>
                </el-form-item>
              </div>
              <div class="display">
                <div class="display w45">
                  <el-form-item label="法定代理人签名：">
                    <el-input class="inputWidth" v-model="form.dlrQmtp"/>
                  </el-form-item>
                </div>
                <div class="display w45" style="margin-left: 24px">
                  <el-form-item label="日期：" label-width="90">
                    <!--                    <el-input class="inputWidth2" v-model="form.dlrQsrq"/>-->
                    <el-date-picker v-model="form.dlrQsrq" class="inputWidth2" type="date" placeholder="选择日期"
                                    format="YYYY年MM月DD日"/>
                  </el-form-item>
                </div>
              </div>
              <div class="display w40">
                <el-form-item label="需法定代理人签署的原因：">
                  <el-input class="inputWidth" style="width: 580px;" v-model="form.dlrQsyy"/>
                </el-form-item>
              </div>
            </div>
            <div class="signBox">
              <div class="display w45" style="margin-top: 20px">
                <el-form-item label="见证人正楷姓名：">
                  <el-input class="inputWidth" v-model="form.jzrName"/>
                </el-form-item>
              </div>
              <div class="display">
                <div class="display w45">
                  <el-form-item label="见证人签名：">
                    <el-input class="inputWidth" v-model="form.jzrQmtp"/>
                  </el-form-item>
                </div>
                <div class="display w45" style="margin-left: 24px">
                  <el-form-item label="日期：" label-width="90">
                    <!--                    <el-input class="inputWidth2" v-model="form.jzrQsrq"/>-->
                    <el-date-picker class="inputWidth2" v-model="form.jzrQsrq" type="date" placeholder="选择日期"
                                    format="YYYY年MM月DD日"/>
                  </el-form-item>
                </div>
              </div>
              <div class="display w45">
                <el-form-item label="需见证人签署的原因：">
                  <el-input class="inputWidth" style="width: 580px;" v-model="form.jzrQsyy"/>
                </el-form-item>
              </div>
            </div>
            <div class="normalText normalTextContent">
              <span style="font-weight: bold; ">医生声明：</span
              >我已对上述参加本研究的自愿者说明了该项研究的有关细节，并且为他/她提供一份签署过的知情同意书的原件。我确认已向<span
                class="dashText"
            >研究参与者</span
            >详细解释了本研究的情况，特别是参加本研究可能产生的风险与受益、免费与补偿、损害与赔偿、自愿与保密等伦理原则和要求。
            </div>
            <div class="signBox">
              <div class="display">
                <div class="display w45">
                  <el-form-item label="医生签名：">
                    <!--                  <el-input class="inputWidth" v-model="form.ysQmtp"/>-->
                    <image-preview :src="form.ysQmtp" :width="50" :height="30"/>
                  </el-form-item>
                </div>
                <div class="display w45" style="margin-left: 24px">
                  <el-form-item label="日期：" label-width="90">
                    <el-date-picker class="inputWidth2" v-model="form.ysQmrq" type="date" placeholder="选择日期"
                                    format="YYYY年MM月DD日"/>
                  </el-form-item>
                </div>
              </div>
              <div class="display w45">
                <el-form-item label="医生的联系电话：">
                  <el-input class="inputWidth" v-model="form.ysPhone"/>
                </el-form-item>
              </div>
            </div>
            <div style="margin-top: 20px; font-size: 14px; ">
              <label style="font-weight: 900">
                四川大学华西医院生物医学伦理审查委员会
              </label>
              <label style="font-weight: 900; margin-left: 20px">
                联系电话：028-85422654，028-85423237
              </label>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-form-item--default {
  margin-bottom: 10px;
}

::v-deep .el-input__wrapper {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

::v-deep .el-input {
  width: 280px;
  border-bottom: solid 1px #aaaaaa;
}

.w45 {
  margin-top: 4px;
  width: 380px;
  font-size: 14px;
}

.display {
  display: flex;
  align-items: center;
}

.signLabel {
  width: 80px;
  text-align: left;
}

.signLabel1 {
  width: 240px;
  text-align: left;
}

.boldText {
  font-weight: bold;
}

.dashText {
  border-bottom: 1px solid #ff000055;
  color: red;
}

.normalText {
  font-size: 14px;
  line-height: 22px;
  text-indent: 24px;
  margin: 12px;
}

.normalTextContent {
  text-indent: 48px;
}

.container {
  padding: 0px;
  font-family: "SimSun", serif;
  background: #f5f5f5;

  .el-form-box {
    background: #f5f5f5;
    border-radius: 5px;
    max-width: 80%;
    width: 1000px;
    margin: 0 auto;
  }

  .el-form {
    padding: 20px 100px;
    background: #FFFFFF;
    overflow-y: auto;

    .titleClass {
      text-align: center;
      font-weight: bold;
      font-size: 26px;
      margin: 0;
    }

    .spanClass {
      border-bottom: 1px solid black;
      color: red;
    }

    .inputWidth {
      width: 190px;
    }

    .inputWidth2 {
      width: 260px;
    }

    .signBox {
      padding: 10px 0;
    }

  }
}

.el-image {
  box-shadow: none;
  background-color: #FFFFFF;
}
</style>
